import React from 'react';
import { Input } from '../../components/input';

interface Props {}

const questions = [
  { title: '为什么是这样的？', content: '我搞不太懂，大家能帮帮我吗？' },
  { title: '感觉JavaScript不太好使？', content: '大家用过Java吗 不觉得Java更好用么' },
  {
    title: 'Bug！在JS中0.1+0.2!=0.3',
    content: '我发现了JS的一个bug！0.1+0.2不等于0.3，没人发现吗？'
  },
  {
    title: 'IE输不了代码怎么回事',
    content: '好奇怪，我是用IE8，好像输不了代码，会卡主。。。我去，一个教编程的网站怎么bug这么多'
  }
];

export function QuestionZone({}: Props) {
  return (
    <>
      <div>
        {questions.map((q) => (
          <div className="cursor-pointer hover:bg-gray-100 active:bg-gray-200 px-3 py-5 rounded-lg">
            <div className="font-bold text-xl flex items-center gap-2">
              <span>{q.title}</span>
              {Math.random() > 0.5 && (
                <span className="border rounded text-xs w-max px-2 h-5 border-indigo-700 text-indigo-700">
                  新人
                </span>
              )}
              {Math.random() > 0.5 && (
                <span className="border rounded text-xs w-max px-2 h-5 border-red-700 text-red-700">
                  热门
                </span>
              )}
            </div>
            <div className="text-gray-700 text-sm">{q.content}</div>
          </div>
        ))}
      </div>
      <div>遇到困难了？在这里可以向大家提问。</div>
      <div className="w-8/12 flex flex-col gap-4">
        <Input className="" placeholder="标题" />
        <textarea
          placeholder="内容"
          className="focus:border-gray-400 w-full shadow-sm outline-none appearance-none placeholder-gray-500 rounded-md border border-gray-300 px-2"
        ></textarea>
      </div>
    </>
  );
}
